<script setup>
	import { computed, ref } from 'vue'
	import { useRouter } from 'vue-router'
	import { storeToRefs } from 'pinia'
	import { useCityStore } from '@/stores/modules/city'

	import cityGroup from './components/city-group.vue'

	const router = useRouter()

	// 搜索
	const searchValue = ref('')
	const cancelClick = () => {
		// 上一级
		router.back()
	}

	// tab 切换
	const cityActive = ref(0)

	// 网络请求:城市数据
	// const allcities = ref({})
	// getCityAll().then((res) => {
	// 	allcities.value = res.data
	// })

	//3. 从 stores 中获取数据
	const cityStore = useCityStore()
	cityStore.fetchAllCitiesData()
	const { allcities } = storeToRefs(cityStore)

	// 获取选择标签后的数据
	// 1. 获取正确的key:将tab中绑定的cityActive正确绑定
	// 2. 根据key从alicities获取数据,默认直接获取数据不是响应式,所以使用compouted
	const currentGroup = computed(() => {
		return allcities.value[cityActive.value]
	})
</script>

<template>
	<div class="city">
		<div class="top">
			<!-- 搜索框 -->
			<van-search
				v-model="searchValue"
				shape="round"
				show-action
				placeholder="城市/区域/位置"
				@cancel="cancelClick" />

			<!-- tab切换 -->
			<van-tabs
				v-model:active="cityActive"
				color="#45cfff">
				<!-- value:对象里面的数据 key:对象名 index:索引 -->
				<template
					v-for="(value, key, index) in allcities"
					:key="key">
					<van-tab
						:title="value.title"
						:name="key"></van-tab>
				</template>
			</van-tabs>
		</div>

		<div class="content">
			<!-- 索引栏 -->
			<!-- <city-group :groupData="currentGroup"></city-group> -->
			<template
				v-for="(value, key, index) in allcities"
				:key="key">
				<div v-show="cityActive === key">
					<city-group
						v-show="cityActive === key"
						:groupData="value">
					</city-group>
				</div>
			</template>
		</div>
	</div>
</template>

<style lang="scss" scoped>
	.city {
		.top {
			position: relative;
			top: 0;
			left: 0;
			right: 0;
			z-index: 999;
		}
		// 局部滚动
		.content {
			height: calc(100vh - 98px);
			overflow-y: auto;
		}
	}
</style>
